<template>
  <div class="app-container">
    <div class="footer">
      <div class="util" v-if="auth && (auth.delete || auth.add)">
        <el-button
          type="danger"
          @click="delCheck"
          v-show="selectList && selectList.length > 0"
          v-if="auth.delete"
        >
          <el-icon><Delete /></el-icon>
          删除选中
        </el-button>
        <el-button type="primary" @click="add" v-if="auth.add">
          <el-icon><Plus /></el-icon>
          新增角色
        </el-button>
      </div>
      <div class="table-inner">
        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="sort" label="排序" align="center" width="80" />
          <el-table-column prop="title" label="角色名称" align="center" />
          <el-table-column
            prop="remark"
            :show-overflow-tooltip="true"
            label="备注信息"
            align="center"
          />
          <el-table-column prop="status" label="角色状态" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                inline-prompt
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                :disabled="auth && !auth.modify"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="180" align="center" />
          <el-table-column prop="status" label="操作" width="320" align="center">
            <template #default="scope">
              <el-button type="success" size="small" icon="Setting" @click="authNode(scope.row)">
                授权
              </el-button>
              <el-button type="success" size="small" icon="Setting" @click="authMenu(scope.row)">
                菜单
              </el-button>
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="edit(scope.row)"
                v-if="auth && auth.edit"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="del(scope.row)"
                v-if="auth && auth.delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <RoleDialog ref="roleDialog" @refresh="getList()" />
    <AuthDrawer ref="authDrawer" />
    <MenuDrawer ref="menuDrawer" />
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { systemAuth, deleteAuth, editAuth } from '@/api/admin'
import RoleDialog from './components/RoleDialog.vue'
import AuthDrawer from './components/AuthDrawer.vue'
import MenuDrawer from './components/MenuDrawer.vue'

const loading = ref(true)
const list = ref()
const total = ref(0)
const query = reactive({
  page: 1,
  limit: 10,
})
const auth = ref()
const roleDialog = ref()
const authDrawer = ref()
const menuDrawer = ref()
const selectList = ref()
const getList = () => {
  loading.value = true
  systemAuth(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}
const handleSizeChange = (val) => {
  query.page = 1
  query.limit = val
  getList()
}
const handleCurrentChange = (val) => {
  query.page = val
  getList()
}
const add = () => {
  roleDialog.value.show()
}
const edit = (row) => {
  roleDialog.value.show(row)
}
const del = (row) => {
  ElMessageBox.confirm(`你确定要删除角色"${row.title}"吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    deleteAuth({ id: row.id }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}
const handleSelectionChange = (val) => {
  selectList.value = val
}
const delCheck = () => {
  ElMessageBox.confirm(`你确定要删除选中的角色吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    let ids = []
    selectList.value.forEach((item) => {
      ids.push(item.id)
    })
    deleteAuth({ id: ids }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}

const changeStatus = (row) => {
  ElMessageBox.confirm(`确定要${!row.status ? '禁用' : '启用'} ${row.title} 角色吗？`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      editAuth({
        id: row.id,
        status: row.status,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: `${!row.status ? '禁用' : '启用'}成功`,
            message: res.msg,
            type: 'success',
          })
        }
      })
    })
    .catch(() => {
      if (row.status == 0) row.status = 1
      else if (row.status == 1) row.status = 0
    })
}
const authNode = (row) => {
  authDrawer.value.show(row)
}
const authMenu = (row) => {
  menuDrawer.value.show(row)
}

nextTick(() => {
  getList()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
